<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<%@ include file="/common/dxp/include/common-base.jsp"%>
	<title>服务使用关系图</title>
</head>
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

	<!-- top start -->
	<%@include file="/common/dxp/top.jsp" %>
	<!-- top end -->

	<!-- left start -->
	<%@include file="/common/dxp/left.jsp" %>
	<!-- left end-->

	<div class="content-wrapper">
		<section class="content">
			<%--<div class="col-xs-12 pt15" style="background: #ffffff;">
				<table class="whfw-table">
					<thead>
					<tr>
						<th style="width: 39px;">序号</th>
						<th>单位编号</th>
						<th>系统编号</th>
						<th>系统名称</th>
					</tr>
					</thead>
					<tbody class="clickCss" id="dataList"></tbody>
				</table>
			</div>--%>
			<div class="box box-solid">
				<div class="hidden">
					<select id="searchForm1_dxInterfaceReg_sysEname" name="dxInterfaceReg.w_sysEname" class="form-control  clean"
							data-obj-name="dxSysReg" data-dict-code="dymicSql" data-type-tag="select"
							data-colmun="{value:'sysEname',text:'sysCname'}" data-page-name="dx-sys-reg-search" data-form-name="searchForm">
						<option value="">-请选择--</option>
					</select>
				</div>
				<div class="box-header with-border">
					<div class="f16">
						<span>
							服务使用关系图（某系统从那些服务接口获取了数据）
						</span>
						<span class="ml15">选择使用系统
							<select name="test" style="border-color: #d2d6de;border-radius: 5px;padding: 6px 12px;border: 1px solid #ccc;" id="dataList"
									onchange="getSysList(this)">
								<option value="">请选择</option>
							</select>
						</span>
					</div>
				</div>
				<div class="box-body no-padding">
					<div id="echartsId" style="height: 600px"></div>
				</div>
			</div>
			<script type="text/template" id="dataList-template">
				<? for ( var i = 0; i < rows.length; i++) {?>
					<option value="<?=JSON.stringify(rows[i])?>"><?=rows[i].sysCname?></option>
				<?}?>
			</script>
			<script>
				var clickMenu= 'jkgl-sys-int-use';
				var userId  = "${loginUser.userId}",userEname="${loginUser.userEname}",orgId  = "${loginUser.orgId}";
				var dictListMap = DictUtil.initDictAndDymic();
				var currReqSysEname="";
				var myChart = echarts.init(document.getElementById('echartsId'));
				var lineNum = 20;//圆点间距
				$(function () {
					sysData();
					// initEcharts();
				});
				function getSysCnameByEname(sysEname) {
					var sysCname = strUtil.doNull(dictListMap['dx-sys-reg-search-searchForm'][sysEname],sysEname);
					console.log(sysEname,sysCname);
					if(sysEname==currReqSysEname){
						return sysCname+'('+sysEname+')';
					}else{
						return sysCname;
					}
				}
				function sysData() {
					$.ajax({
						type:'get',
						url:common_list_url,
						data: {'pageName': 'dx-data-statistics-type', 'formName': 'statisticsForm','statType':'6'},
						dataType: 'json',
						success: function (myData) {
							if(myData.flag == 'T'){
								var htmlContent = baidu.template("dataList-template",myData);
								$('#dataList').html(htmlContent);
								getSysList();
							}
							console.log(myData,'myData')
						}
					})
				}
				var colorArray = ['#37a2da','#32c5e9','#67e0e3','#9fe6b8',
					'#ffdb5c','#ff9f7f','#fb7293','#fb7293',
					'#e062ae','#e690d1','#e7bcf3','#9d96f5',
					'#8378ea','#96bfff'];

				function getSysList() {
					var index_load = layer.load(1, {shade: false});
					var obj = JSON.parse($('#dataList').val());
					console.log('selected',obj);
					currReqSysEname = obj.sysEname;
					$.ajax({
						type: 'get',
						url: common_list_url,
						data: {'pageName': 'dx-data-statistics-type', 'formName': 'statisticsForm', 'statType': '5','sysEname':obj.sysEname},
						dataType: 'json',
						success: function (myData) {
							console.log('statisticsForm',myData);
							var dataInfo = [],
								dataLink = [],
								dataThree = [],
									arrowData1=[],arrowData2=[];
							dataInfo.push({
								name: obj.sysCname,
								category: 0, // 这是种类，一级实体1二级关系2三级关系3四级关系4
								symbolSize: 7,
								draggable: true,
								fixed: true,
								value: [0, 150]
							});
							var valueOdd = 150,
								valueEven = 130,
								num = 1;
							var valueOdd1 = 150,
								valueEven1 = 130;
							for(var key in myData.rows[0]){
								// var targetSysName = key;
								var targetSysName = getSysCnameByEname(key);
								var objTwo = {
									name: targetSysName,
									category: 2, // 这是种类，一级实体1二级关系2三级关系3四级关系4
									symbolSize: 7,
									draggable: true,
									fixed: true
								},
								/*objLink = {
									source: obj.sysCname,
									value: "0",
									target: key,
								};*/
								dataThree = myData.rows[0][key];
								console.log('dataThree',dataThree);
								if(num%2==0){//偶数 valueEven-50
									objTwo.value = [500,valueEven];
									valueEven = valueEven-lineNum;
								}else{//奇数 valueOdd+50
									objTwo.value = [500,valueOdd];
									valueOdd = valueOdd+lineNum;
								}
								dataInfo.push(objTwo);
								// dataLink.push(objLink);

								dataThree.forEach(function (items,index) {
									// console.log('dataThree',index,items);
									index++;
									var objTwo1 = {
										name: items.interfaceName,
										code: items.interfaceCode,
										category: 1,
										symbolSize: 7,
										draggable: true,
										fixed: true
									},
									objLink1 = {
										source: obj.sysCname,
										value: "20",
										target: items.interfaceName,
										lineStyle: {
											color: colorArray[(index%colorArray.length)]
										}
									},
									objLink = {
										source: items.interfaceName,
										value: "0",
										target: targetSysName,
										lineStyle: {
											color: colorArray[(index%colorArray.length)]
										}
									};
									if(index%2==0){//偶数 valueEven-50
										objTwo1.value = [200,valueEven1];
										valueEven1 = valueEven1-lineNum;
									}else{//奇数 valueOdd+50
										objTwo1.value = [200,valueOdd1];
										valueOdd1 = valueOdd1+lineNum;
									}
									dataInfo.push(objTwo1);
									dataLink.push(objLink1,objLink);

									// arrowData1.push([{coord: [0, 150]}, {coord: objTwo1.value}]);//第1层到第2层箭头
									// arrowData2.push([{coord: objTwo1.value}, {coord: objTwo.value}]);//第2层到第3层箭头

									arrowData1.push([ {coord: objTwo1.value},{coord: [0, 150]}]);//第2层到第1层箭头
									arrowData2.push([{coord: objTwo.value},{coord: objTwo1.value}]);//第3层到第2层箭头
								});
								num++;
							}
							console.log('dataInfo',dataInfo,dataLink);
							option = {
								title: {
									show: false,
									text: "服务使用关系图",
									top: "top",
									left: "center"
								},
								toolbox: {
									feature: {
										saveAsImage: {show: true}
									}
								},
								grid: { // 控制图的大小，调整下面这些值就可以，
									left: '10%',
									right: '10%',
									top:'10%'
									// y: 20 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
								},
								itemStyle: {
									normal: {
										color: '#000',
									},
									shadowBlur: 10//倒影
								},
								animationDuration: 1500,
								animationEasingUpdate: 'quinticInOut',
								xAxis: {
									show: false,
									type: 'value'
								},
								yAxis: {
									show: false,
									type: 'value'
								},
								series: [{
									type: 'graph',
									coordinateSystem: 'cartesian2d',
									legendHoverLink: false,
									hoverAnimation: true,
									nodeScaleRatio: false,
									avoidLabelOverlap: true,
									//箭头
									// edgeSymbol: ['circle', 'arrow'],
									edgeSymbol: ['circle'],
									edgeSymbolSize: [2, 7],
									edgeLabel: {
										show: false,
										normal: {
											show: false,//箭头之间文字显示隐藏
											position: 'middle',
											textStyle: {
												fontSize: 12
											},
											formatter: "{c}"
										}
									},
									focusNodeAdjacency: true,
									roam: true,
									categories: [{
										name: '一级关系',
										itemStyle: { //可配置颜色
											normal: {
												color: "#1d3fda",
											}
										}
									}, {
										name: '二级关系',
										itemStyle: { //可配置颜色
											normal: {
												color: "#737373",
											}
										}
									}, {
										name: '三级关系',
										itemStyle: { //可配置颜色
											normal: {
												color: "#9721ea",
											}
										}
									}, {
										name: '四级关系',
										itemStyle: { //可配置颜色
											normal: {
												color: "#667AED",
											}
										}
									}, {
										name: '五级关系',
										itemStyle: { //可配置颜色
											normal: {
												color: "red",
											}
										}
									}],
									//圆形上面的文字
									label: {
										normal: {
											position: "bottom",
											show: true,
											textStyle: {
												// color: 'red',
												fontSize: 12
											},
										}
									},
									itemStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
												offset: 0,
												color: '#157eff'
											}, {
												offset: 1,
												color: '#35c2ff'
											}]),
										},
										shadowBlur: 10
									},
									// lineStyle: {
									//     normal: {
									//         width: 1,
									//         shadowColor: 'none',
									//         color: '#0250FD'
									//     },
									// },
									lineStyle: {
										normal: {
											opacity: 0.9,
											width: 1,
											curveness: 0.1
										}
									},
									data: dataInfo,
									// links: dataLink
								}
								,{//第1层到第2层动态箭头
									name: 'A',
									type: 'lines',
									coordinateSystem: 'cartesian2d',
									z: 1,
									effect: {
										show: true,
										smooth: false,
										trailLength: 0,
										symbol: "arrow",
										color: 'rgba(113,113,113,0.5)',
										symbolSize: 10
									},
									lineStyle: {
										normal: {
											curveness: 0.1//弯曲度
										}
									},
									data: arrowData1
								},{//第2层到第3层动态箭头
									name: 'B',
									type: 'lines',
									coordinateSystem: 'cartesian2d',
									z: 1,
									effect: {
										show: true,
										smooth: false,
										trailLength: 0,
										symbol: "arrow",
										color: 'rgba(113,113,113,0.5)',
										symbolSize: 10
									},
									lineStyle: {
										normal: {
											curveness: 0.1//弯曲度
										}
									},
									data: arrowData2
								}
								]
							}
							myChart.setOption(option);
							var allNode=0;
							console.log(myChart,'myChart')
							var nodes=myChart._chartsViews[0]._symbolDraw._data._graphicEls;
							console.log(nodes,'nodes')
							for(var i=0,count =nodes.length;i<count;i++){
								var node=nodes[i];
								if(node===undefined)
									continue;
								allNode++;
							}
							var height=window.innerHeight;
							var currentHeight=30*allNode;
							var newWidth=Math.max(currentHeight,height);
							// container.style.width = window.innerWidth + 'px';
							document.getElementById('echartsId').style.height = newWidth + 'px';
							myChart.resize();
							// console.log(myData,'getSysList');
							layer.close(index_load);
						}
					})
				}

			</script>
		</section>
	</div>
</div>
</body>
</html>